<div class="bg-white shadow overflow-hidden sm:rounded-lg max-w-3xl mx-auto">
  <div class="flex justify-between px-4 py-5 sm:px-6">
    <h3 class="text-lg leading-6 font-medium text-gray-900"><%= t(".title") %></h3>
    <% if stripe_customer? %>
      <span class="ml-4 flex-shrink-0">
        <%= link_to "Stripe account", stripe_url, class: "bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
      </span>
    <% end %>
  </div>

  <div class="border-t border-gray-200 px-4 py-5 sm:p-0 sm:divide-y sm:divide-gray-200">
    <% business.user.subscriptions.reverse_each do |subscription| %>
      <dl>
        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500"><%= t(".plan") %></dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"><%= plan_name(subscription) %></dd>
        </div>
        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500"><%= t(".status") %></dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"><%= subscription.status.humanize %></dd>
        </div>

        <% if subscription.ends_at.present? %>
          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500"><%= t(".expires_on") %></dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"><%= subscription.ends_at.strftime("%a, %e %b %Y") %></dd>
          </div>
        <% end %>
      </dl>
    <% end %>
  </div>
</div>
